
<template>
    <h1>地图</h1>
    <!-- <el-button @click="getGas" >获取附近的加油站</el-button> -->
    <div id="container"></div>
    
  </template>
  
  <script lang="ts" setup>
  import { onMounted } from "vue";
//   import axios from "axios";
  
  var map;
  
  onMounted(() => {
    map = new BMapGL .Map(document.querySelector("#container"));
    var point = new BMapGL .Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(false); //开启鼠标滚轮缩放
    // map.setHeading(64.5);   //设置地图旋转角度
    // map.setTilt(73);       //设置地图的倾斜角度
    // map.setMapType(BMAP_EARTH_MAP);
    var scaleCtrl = new BMapGL .ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL .ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    var opts = {
      offset: new BMapGL .Size(150, 5),
    };
    var cityCtrl = new BMapGL .CityListControl(opts); // 添加城市列表控件
    map.addControl(cityCtrl);
  
  //   var point = new BMapGL.Point(116.404, 39.915);
  //   var marker = new BMapGL.Marker(point); // 创建标注
  //   map.addOverlay(marker);
  
    
  //   var point = new BMapGL.Point(116.600, 39.915);
  //   var marker = new BMapGL.Marker(point); // 创建标注
  //   map.addOverlay(marker);
  });
  
//   const getGas=()=>{
      
//       axios.get("http://localhost:3000/gasStations")
//       .then(res=>{
//           res.data.forEach(item=>{
//                 var point = new BMapGL.Point(item.longitude,item.latitude);
//                 var marker = new BMapGL.Marker(point); // 创建标注
//                 map.addOverlay(marker);
//           })
  
//           var point = new BMapGL.Point(res.data[0].longitude, res.data[0].latitude);
//           map.centerAndZoom(point, 15);
//       })
  
//   }
  
  </script>
  
  <style lang="scss" scoped>
  #container {
    width: 100%;
    height: 100%;
  }
  </style>
  